<template>
  <div class="sub-floor flex" ref="scrollTarget">
    <div class="avatar-container shrink-0">
      <el-avatar :src="item.author.avatar" :size="24" />
    </div>
    <div class="con m-l-10 flex-1">
      <div class="p-b-4" v-html="contentHTML"></div>
      <div class="f-mini info">
        <timeago2 :date-time="item.created_at" />
        <vote-like :comment="item" @voted="handleUpdated" class="m-l-16" />
        <span class="link primary-hover-color m-l-16" @click="replying = !replying">回复</span>
      </div>
      <reply-container
        v-show="replying"
        :cur-comment-id="curCommentId"
        :receive-comment-id="item.id"
        :receive-user-id="item.author.id"
        :receive-user-nickname="item.author.nickname"
        @replied="repliedComment"
      />
    </div>
    <div v-if="allowDelete" class="con shrink-0">
      <delete-link :comment="item" @deleted="handleDeleted" />
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex';
import EmojiMixin from '@/components/emoji/emoji-mixin';
import DeleteLink from '@/components/issues-comments/components/delete-link';
import VoteLike from '@/components/issues-answers/sub-comments/vote-like';
import ReplyContainer from './reply-container';

export default {
  name: 'comments-list-item',
  mixins: [EmojiMixin],
  components: {
    DeleteLink,
    VoteLike,
    ReplyContainer,
  },
  props: {
    comment: Object,
    curCommentId: Number,
  },
  data() {
    return {
      item: this.comment,
      replying: false,
    };
  },
  computed: {
    ...mapState({ curUser: 'currentUser' }),
    ...mapGetters(['isWebAdmin', 'isSpaceOwner', 'isSpaceAdmin']),
    contentHTML() {
      const authorHTML = `<a href="#/users/${this.item.author.id}" class="title link" target="_blank">${this.item.author.nickname}</a>`;
      const receiveHTML = this.item.receiver
        ? ` 回复 <a href="#/users/${this.item.receiver.id}" class="at-user" target="_blank">@${this.item.receiver.nickname}</a>`
        : '';
      const contentHTML = this.emojiFormat(this.item.content);
      return `${authorHTML}${receiveHTML}：${contentHTML}`;
    },
    isCurComment() {
      return this.item.id === Number(this.$route.query.sub_comment_id);
    },
    allowDelete() {
      return (this.curUser.id === this.item.author.id)
        || this.isWebAdmin || this.isSpaceOwner || this.isSpaceAdmin;
    },
  },
  mounted() {
    if (this.isCurComment) this.scrollIntoCurComment();
  },
  methods: {
    handleUpdated(comment) {
      Object.assign(this.item, comment);
    },
    handleDeleted(comment) {
      this.$emit('deletedComment', comment);
    },
    // 当通过消息提醒跳过来时，获取焦点
    scrollIntoCurComment() {
      this.$refs.scrollTarget.scrollIntoView({ block: 'center' });
    },
    // 回复了评论
    repliedComment(comment) {
      this.$message.success('回复成功');
      this.replying = false;
      this.$emit('repliedComment', comment);
    },
  },
};
</script>

<style lang="scss">
.sub-floor {

  >.avatar-container {
    margin-top: .5rem;
  }

  >.con {
    padding-top: 8px;
    padding-bottom: 8px;
    min-width: 0;

    p { margin-bottom: .325em; }
  }
}
.sub-floor+.sub-floor>.con { border-top: 1px solid #e5e5e5; }
</style>
